<template>
	<view class="f26r col333">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="订单详情" back @onBack="goBack"
		></navbar>
		<view class="pl20r pr20r pb20r">
			<!-- <view class="foWeiBold f32r lh80r">
				订单状态：已取消
			</view> -->
			<!-- <view class="p20r backColWhite borRad10r disFlex">
				<view class="w180r">
					<image src="/static/images/logo.png" mode="aspectFill"
						class="wPer100 h180r borRad10r"
					></image>
				</view>
				<view class="flex1 pl20r disFlex flDirColumn juConCenter">
					<view class="f30r foWeiBold webLiCl1 webBoxOrVer overHid disWebBox">
						E01(会议室,可聚餐)
					</view>
					<view class="mt15r col999 webLiCl1 webBoxOrVer overHid disWebBox">
						福建省泉州市南安市曙宁大厦6楼
					</view>
					<view class="mt15r col999">
						2022-12-08 21:00 ~ 12-08 23:00
					</view>
				</view>
			</view> -->
			<view class="backColWhite borRad10r pl20r pr20r pb20r mt20r bSha0010u0rgb00001">
				<view class="lh80r foWeiBold f30r">
					订单信息
				</view>
				<view class="disFlex aliItCenter">
					<view class="w120r col999">
						订单号
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{optionIten.out_trade_no}}
						<text class="pl20r pr20r lh60r bor1SDadada f24r ml10r borRad5r foWeiNor"
							@click="cliCopyBtn"
						>
							复制
						</text>
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						茶室名
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{optionIten.tname}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						房间名
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{optionIten.rname}}
					</view>
				</view>
				<!-- <view class="disFlex mt20r">
					<view class="w120r col999">
						支付方式
					</view>
					<view class="flex1 teAliRight foWeiBold">
						微信支付
					</view>
				</view> -->
				<view class="disFlex mt20r">
					<view class="w120r col999">
						订单类型
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{
							optionIten.order_type == 1 ? '预订订单' :
							optionIten.order_type == 2 ? '立即使用订单' : optionIten.order_type
						}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w150r col999">
						正常单/续单
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{
							optionIten.order_status == 1 ? '正常单' :
							optionIten.order_status == 2 ? '续单' : optionIten.order_status
						}}
					</view>
				</view>
				<view class="disFlex mt20r" v-if="optionIten.order_status == 2">
					<view class="w140r col999">
						被续订单号
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{optionIten.front_out_trade_no}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						会员卡
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{
							optionIten.is_cardrule == 1 ? '未使用' :
							optionIten.is_cardrule == 2 ? '已使用' : optionIten.is_cardrule
						}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						订单状态
					</view>
					<view :class="['flex1', 'teAliRight', 'foWeiBold',
							optionIten.make_status == 1 || optionIten.make_status == 4 ? 'colC72d21' : 'col00c260'
						]"
					>
						{{
							optionIten.make_status == 1 ? '待使用' :
							optionIten.make_status == 2 ? '使用中' :
							optionIten.make_status == 3 ? '已完成' :
							optionIten.make_status == 4 ? '已取消' : optionIten.make_status
						}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						付款状态
					</view>
					<view :class="['flex1', 'teAliRight', 'foWeiBold',
							optionIten.type == 2 ? 'col00c260' : 'colC72d21'
						]"
					>
						{{
							optionIten.type == 1 ? '未支付' :
							optionIten.type == 2 ? '已支付' :
							optionIten.type == 3 ? '已退款' :
							optionIten.type == 4 ? '支付超时' : optionIten.type
						}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						付款方式
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{
							optionIten.pay_type == 1 ? '余额支付' :
							optionIten.pay_type == 2 ? '微信支付' : optionIten.pay_type
						}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						原价/小时
					</view>
					<view class="flex1 teAliRight foWeiBold colFf3627">
						¥{{optionIten.price}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						实付金额
					</view>
					<view class="flex1 teAliRight foWeiBold colFf3627">
						¥{{optionIten.amount}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						服务时间
					</view>
					<view class="flex1 teAliRight foWeiBold">
						<view>
							开始：{{optionIten.start_time}}
						</view>
						<view class="mt10r">
							结束：{{optionIten.end_time}}
						</view>
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						服务时长
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{optionIten.hour}}小时
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						保洁时至
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{optionIten.clear_end_time}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						套餐
					</view>
					<view class="flex1 teAliRight foWeiBold" v-if="optionIten.sid == '999999'">
						无
					</view>
					<view class="flex1 teAliRight" v-if="optionIten.sid != '999999' && optionIten.setmeal_info">
						<view class="foWeiBold mb20r">
							套餐合计：
							<text class="colCe2e37 ml10r">
								¥{{optionIten.setmeal_info.price}}
							</text>
						</view>
						<view class="teAliLeft bor1SF4f4f4 borRad10r">
							<view class="lh50r f24r"
								v-for="(item, index) in optionIten.setmeal_info.content" :key="index"
							>
								{{(index + 1) + '.' + item.snacks}}：数量{{item.quantity}}
								<text class="col999 ml10r textDecLiTh">
									原价¥{{item.oriPrice}}
								</text>
								<text class="colCe2e37 ml10r">
									套餐价¥{{item.prePrice}}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						异常退款
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{optionIten.msg ? optionIten.msg : '无'}}
					</view>
				</view>
				<view class="disFlex mt20r">
					<view class="w120r col999">
						下单时间
					</view>
					<view class="flex1 teAliRight foWeiBold">
						{{optionIten.date}}
					</view>
				</view>
			</view>
			<button open-type="contact"
				class="teAliCenter lh80r col99c043 backColWhite mt20r borRad10r f28r bSha0010u0rgb00001 notBtnSty"
			>
				<image :src="baseUrl + 'iconCustomerServiceGreen.png'" mode="aspectFit"
					class="w40r h40r poRel top8r mr10r"
				></image>
				在线客服
			</button>
			<!-- <view class="teAliCenter lh80r col99c043 backColWhite mt20r borRad10r f28r"
				@click="cliPhoneGreen"
			>
				<image :src="baseUrl + 'iconPhoneGreen.png'" mode="aspectFit"
					class="w40r h40r poRel top8r mr10r"
				></image>
				联系商家
			</view> -->
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { baseUrl } from '@/utils/request.js'
export default {
	components: { navbar },
	data() {
		return {
			baseUrl,
			optionIten: {}
		}
	},
	onLoad(options) {
		this.optionIten = uni.getStorageSync('orderDetail');
		uni.removeStorageSync('orderDetail');
		if(this.optionIten.setmeal_info) {
			this.optionIten.setmeal_info = JSON.parse(this.optionIten.setmeal_info);
			if(this.optionIten.setmeal_info.content && this.optionIten.setmeal_info.content != '') {
				let newAry1 = [];
				newAry1 = this.optionIten.setmeal_info.content.split('|');
				this.optionIten.setmeal_info.content = [];
				newAry1.forEach(item2 => {
					this.optionIten.setmeal_info.content.push({
						snacks: item2.split(',')[0], quantity: item2.split(',')[1],
						oriPrice: item2.split(',')[2], prePrice: item2.split(',')[3]
					})
				})
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		cliCopyBtn() {
			uni.setClipboardData({ data: this.optionIten.out_trade_no });
		},
		cliPhoneGreen() {
			uni.makePhoneCall({
				phoneNumber: '800-820-8820',
				success:res => {
					if(res) console.log(11, res)
				}
			});
		}
	}
}
</script>